<!DOCTYPE html>
<html xmlns:c="http://www.springframework.org/schema/util">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LogView - 页面</title>
    <style>
        .log-container {
            padding: 0px;
        }

        .fix::after {
            clear: both;
            content: " ";
            display: block;
            font-size: 0;
            height: 0;
            visibility: hidden;
        }

        .log-container .log-box {
            margin: 0 auto;
            border-radius: 5px !important;
            box-shadow: 0 0 4px 1px #DEDEDE;
        }

        .log-box .panel-heading {
            padding: 3px 6px;
        }

        .log-container .log-box .log-control span {
            cursor: pointer;
            margin: 0 5px;
        }

        .log-container .log-box .log-control .log-filter {
            width: 500px;
            float: left;
        }

        .log-control .log-input,
        .log-control .log-input,
        .log-control .log-input {
            width: 150px !important;
            float: left !important;
            margin-left: 5px !important;
            border-radius: 5px !important;
            font-size: 12px !important;
        }

        .log-control .log-filter .form-control {
            background: transparent !important;
            height: auto !important;
        }

        .log-control .log-filter .btn {
            border-radius: 5px !important;
            font-size: 12px !important;
        }

        .log-container .log-box .log-control .log-keys {
            float: right;
            line-height: 32px;
            vertical-align: middle;
            text-align: right;
        }

        .log-container .log-box .log-control .log-keys .log-range {
            width: 80px !important;
            height: 30px !important;
        }

        .log-box .log-content {
            height: 400px;
            overflow-x: auto;
            overflow-y: auto;
            padding: 10px 15px;
            background: #2A2A2A;
            color: #B9B9B9;
        }

        .log-content .log-item {
            white-space: nowrap;
            font-size: 15px;
            font-weight: normal;
            opacity: 0.8;
        }

        .log-content .log-item p {
            padding: 1px;
        }

        .log-content .log-item .seq {
            min-width: 15px;
            display: inline-block;
        }

        .log-content .log-item:hover p {
            opacity: 1;
            cursor: pointer;
        }

        .log-content .log-item:hover p .seq {
            color: #E64331;
        }

        .log-item span {
            margin: 0 3px;
        }

        .log-item .level {
            color: #D1BF60;
        }

        .log-item .className {
            color: #2D958E;
        }

        .log-item .username {
            color: #2798C6;
        }

        .log-item .log-exception {
            padding-left: 10px;
        }

        .log-item .log-exception .stackTrace-message,
        .log-item .log-exception .stackTrace-item {
            display: block;
            vertical-align: middle;
        }

        p {
            margin: 0px !important;
        }

    </style>
    <link rel="stylesheet" href="/static/v3/css/bootstrap.min.css">
</head>

<body>
<div class="main">
    <div id="logContainer" class="log-container">
        <div class="panel panel-default log-box">
            <div class="panel-heading">
                <div class="log-control fix">
                    <div id="logFilter" class="log-filter fix">
                        <input id="keywords" class="keywords form-control log-input" placeholder="关键词过滤"/>
                        <input id="userSelector" class="keywords form-control log-input" placeholder="用户过滤" disabled/>
                        <select id="levelSelector"
                                class="levelSelector selectpicker show-tick form-control log-input">
                            <option value="" selected>ALL</option>
                        </select>
                    </div>
                    <div id="logKeys" class="log-keys fix">
                        <input id="logRange" class="log-range form-control log-input" placeholder="1-X"/>
                        <span id="logCatalina" class="log-catalina"><i class="glyphicon glyphicon-play"></i></span>
                        <span id="logCopy" class="log-copy" title="点击复制"><i
                                class="glyphicon glyphicon-copy"></i></span>
                        <span id="logClear" class="log-clear"><i class="glyphicon glyphicon-trash"></i></span>
                    </div>
                </div>
            </div>
            <div class="log-content">
                <ul>

                </ul>
            </div>
        </div>


    </div>
</div>
</body>
<script type="text/javascript" src="/static/v3/js/common/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/v3/js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/sockjs.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/clipboard.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/stomp.js"></script>
<script type="text/javascript">

    //日志容器
    var logContainerJQ = $("#logContainer");
    var logContentJQ = logContainerJQ.find(".log-content>ul");


    //日志子项模板
    var logTemplate = '<li class="log-item">' +
        '<p class="log-message">{{log-message}}</p></li>';
    //websocket
    var socket = new SockJS("/sock");
    var stompClient = Stomp.over(socket);

    //连接服务器
    stompClient.connect({}, function (frame) {
        logContentJQ.append('<li class="log-item">连接建立成功,请点击按键接收日志...</li>')

        //连接成功后,为logControl绑定事件
        var logCatalinaJQ = $("#logCatalina");

        //点击订阅或取消订阅日志
        logCatalinaJQ.on("click", function () {
            var _this = this;
            var iconJQ = $(_this).find("i.glyphicon");

            var hasStartClass = iconJQ.hasClass("glyphicon-play");
            if (hasStartClass) {
                //订阅日志
                _this.subscription = subscribeLog(stompClient, iconJQ, logContentJQ);
            } else {
                //取消订阅日志
                unsubscribeLog(_this.subscription, iconJQ, logContentJQ);
            }
        });

    }, function (error) {
        logContentJQ.append('连接失败【' + error + '】');
    });


    //订阅日志信息
    var seq = 0;

    function subscribeLog(stompClient, iconJQ, logContentJQ) {

        //公共订阅,服务器可以通过该地址发送信息给所有用户
        var subscription = stompClient.subscribe("/topic/runningMsg", function (res) {
            if (res && res.body) {
                var resBody = res.body;
                var keywords = $('#keywords').val();
                if (keywords == '' || resBody.indexOf(keywords) > 0) {
                    var logMessage = logTemplate.replace("{{log-message}}", resBody);
                    logContentJQ.append(logMessage);
                }
            }
        });
        iconJQ.removeClass("glyphicon-play").addClass("glyphicon-stop");
        logContentJQ.append('<li class="log-item">开始接收日志...</li>');
        return subscription;
    }

    //取消订阅日志信息
    function unsubscribeLog(subscription, iconJQ, logContentJQ) {
        subscription.unsubscribe();
        iconJQ.removeClass("glyphicon-stop").addClass("glyphicon-play");
        logContentJQ.append('<li class="log-item">停止接收日志...</li>')
    }

    //清理日志
    $("#logClear").on("click", function () {
        logContentJQ.html("");
    });


    //页面初始化
    changeLogContentHeight();

    //监听浏览器窗口,动态调整控制台的高度
    $(window).resize(function () {
        changeLogContentHeight();
    });

    //根据窗口高度和可视元素调整logContent的高度
    function changeLogContentHeight() {
        //获取浏览器显示区域的高度及navbar、pageHeader的高度
        var windowHeight = $(window).height();
        var panelHeadingHeight = $("#logContainer .panel-heading").outerHeight(true);

        var logContentHeight = windowHeight - panelHeadingHeight;
        console.log(panelHeadingHeight);
        //设置日志内容高度
        $("#logContainer .log-content").height(logContentHeight);
    }
</script>
</html>


